<template>
    <div id="apparea" class="queryfee anipage">
        <pageheader :showback="false" :fixed="false">
            <template slot="title">
                <p class="nav_slot" @click='choosearea'><van-icon class="vanicon" name="location-o" /> <span :class="{'active':location!=''}">{{location?location:'选择区域'}}</span></p>
            </template>
        </pageheader>
        <div class="list_wrap" v-if="location!=''">
            <queryitem1 :feelist="feelist" v-if="sType==1"></queryitem1>
            <queryitem3 :feelist="feelist" v-else-if="sType==3"></queryitem3>
			<queryitem2 :feelist="feelist" v-else></queryitem2>
        </div>
        <div class="list_wrap" v-else>
            <van-empty description="暂无相关数据" />
        </div>
        <van-popup v-model="locationPicker" position="bottom">
          <van-picker
            show-toolbar
            title="请选择区域"
            :columns="locationcolumns"
            @confirm="onlocationConfirm"
            @cancel="locationPicker = false"
          >
          </van-picker>
        </van-popup>
    </div>
</template>

<script>
import pageheader from "@/components/public/pageheader.vue";
import animationminx from "@/mixins/animationminx.js";
import queryitem1 from "./sType1.vue";
import queryitem2 from "./sType2.vue";
import queryitem3 from "./sType3.vue";
import { mapState,mapGetters } from "vuex";
export default {
    name: "transdetail",
    components: {
        pageheader,
        queryitem1,
        queryitem2,
        queryitem3
    },
    mixins: [animationminx],
    data() {
        return {
            location:'东莞市',
            feelist:[],
            locationPicker:false,
            locationcolumns:['韶关','肇庆市','粤西','珠海','潮汕区域','清远市','深圳市','河源','江门市'],
        }
    },
    computed:{
        ...mapGetters({
            "sType":'user/sType'
        }),
        ...mapState({
            openid: state=>state.user.token,
			account:state=>state.user.account
        })
    },
    methods:{
        choosearea:function(){
            this.locationPicker=true;
        },
        onlocationConfirm:function(val){
            this.location=val;
            this.locationPicker=false;
            this.getPricelist();
        },
        getPricelist:function(){
            var _this=this;
            var loading= this.$toast.loading({
              message: '数据加载中...',
              forbidClick: true,
            });
			let url='/home/getPriceList';
			if(!this.account)
			{
				url='/public/getPriceList';
			}
            this.axios.post(url,{area:this.location}).then((res)=>{
                console.log(res);
                loading.clear();
                if(res.errno==0)
                {
                    _this.feelist=res.data;
                }else{
                    _this.$toast(res.errmsg);
                }
            }).catch((err)=>{
                loading.clear(); 
            })
        },
        getAreaList:function(){
            var _this=this;
            this.axios.get('/public/getAreaList').then((res)=>{
                if(res.errno==0)
                {
                    _this.locationcolumns=res.data.map((m)=>{
                        return m.area;
                    });
                }else{
                    _this.$toast(res.errmsg);
                }
            }).catch((err)=>{
            })
        }
    },
    mounted:function(){
		if(!this.openid)
		{
			this.$router.push({
				path:'/login?redirect=queryfee'
			})
			return;
		}else{
			var _this=this;
			var loading = this.$toast.loading({
			  duration:60000,
			  message: '加载中...',
			  forbidClick: true,
			  loadingType: 'spinner'
			});
			this.axios.get('/home/getUserInfo').then((res)=>{
			    loading.clear();
			    if(res.errno==0)
			    {
					var account = res.data;
			        _this.$store.commit('user/setAccount',account);
					_this.getAreaList();
					_this.getPricelist();
			    }else{
			       _this.getAreaList();
			       _this.getPricelist();
			    }
			}).catch((err)=>{
			    loading.clear();
			    _this.$toast.fail('获取数据失败');
			})
		}
    }
};
</script>

<style lang="less" scoped>
.queryfee{
    width: 100%;
    height: auto;
    .nav_slot{
        font-size: 0px;
        color: #333;
        line-height: 1.4;
        span{
            font-size: .32rem;
            display: inline-block;
            vertical-align: middle;
            margin-top: 1px;
        }
        .active{
            color: #63A35C;
        }
        .vanicon{
            font-size: .46rem;
            vertical-align: middle;
            display: inline-block;
            color: #777;
            margin-right: 2px;
        }
    }
}
</style>
